<script lang="ts" setup>
import { createVNode } from 'vue';

import { useAsync } from '@/hooks/use-async';
import { exportTableByVNode } from '@/utils/table-util';

import { injectState } from '../state';
import DetailDialog from './detail-dialog.vue';
import SheetItem from './sheet-item.vue';

defineOptions({ name: 'Headler' });

const { selectedList } = injectState()!;

const detailDialogRef = shallowRef<InstanceType<typeof DetailDialog>>();

//导出
const { execute: exportTable, isLoading: exportLoading } = useAsync(async () => {
  const vnode = createVNode(ElTable, { data: selectedList.value }, () => h(SheetItem));
  await exportTableByVNode(vnode, 'export.xls');
});
</script>

<template>
  <DetailDialog ref="detailDialogRef" />
  <div flex="~ justify-between">
    <div flex="~">
      <el-button type="primary" @click="detailDialogRef?.trigger('add')">
        <template #icon>
          <el-icon class="i-custom:add" />
        </template>
        新建
      </el-button>

      <el-button
        :disabled="selectedList.length === 0"
        :loading="exportLoading"
        @click="exportTable()"
      >
        <template #icon>
          <el-icon class="i-material-symbols:file-save-outline-rounded" />
        </template>
        导出
      </el-button>
    </div>
  </div>
</template>
